<script setup lang="ts">
import type { BandwidthType } from '@/apis/model/bandwidth.ts'
import {
  deleteBandwidthTypeApi,
  getBandwidthTypeListApi,
} from '@/apis/modules/bandwidthType.ts'
import { commonTableProps } from '@/utils/table.ts'
import { Message } from '@arco-design/web-vue'
import EditDialog from './components/EditDialog.vue'
import useConfig from './useConfig.ts'

const queryParams = ref({
  limit: 500,
})

const { tableColumns } = useConfig()
const {
  visible: editDialogVisible,
  data: editDialogData,
  open: openEditDialog,
} = usePopup<BandwidthType>()

const {
  data: tableData,
  loading,
  run,
} = useListRequest(getBandwidthTypeListApi, {
  immediate: true,
  params: queryParams,
})

const { createSortChange } = useTable(run, tableData)
const onSortChange = createSortChange(queryParams)

// 删除带宽
function handleDelete(record: BandwidthType) {
  ModalHelper.error({
    title: '删除带宽',
    content: '确定要删除带宽吗？带宽删除后不可恢复。',
    maskClosable: false,
    okText: '删除',
    width: 480,
    closable: false,
    async onOk() {
      await deleteBandwidthTypeApi({ id: record.id })
      await run()
      Message.success('删除成功')
    },
  })
}
</script>

<template>
  <main-container
    :loading="loading"
    :show-pagination="false"
    @run="run"
  >
    <template #header>
      <a-button
        type="primary"
        @click="openEditDialog()"
      >
        新建带宽
      </a-button>
    </template>
    <a-table
      v-bind="commonTableProps"
      :columns="tableColumns"
      :data="tableData"
      @sorter-change="onSortChange"
    >
      <template #actions="{ record }">
        <a-link
          type="primary"
          @click="openEditDialog(record)"
        >
          <i-icons-edit size="14px" />
        </a-link>
        <a-link
          status="danger"
          @click="handleDelete(record)"
        >
          <i-icons-delete size="14px" />
        </a-link>
      </template>
    </a-table>
  </main-container>

  <edit-dialog
    v-model="editDialogVisible"
    :record="editDialogData"
    @success="run"
  />
</template>
